{% extends 'base.html' %}
{% load static %}

{% block title %}创建对战{% endblock %}

{% block extra_css %}
<style>


    .page-header {
        background: linear-gradient(135deg, rgba(100, 150, 255, 0.1), rgba(0, 212, 255, 0.1));
        backdrop-filter: blur(10px);
        border: 1px solid rgba(100, 150, 255, 0.2);
        border-radius: 15px;
        padding: 30px;
        margin-bottom: 30px;
        text-align: center;
        box-shadow: 0 8px 32px rgba(100, 150, 255, 0.1);
    }

    .page-header h1 {
        background: linear-gradient(135deg, #6496ff, #00d4ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        margin: 0;
        font-weight: 600;
        font-size: 2.5rem;
    }

    .container {
        max-width: 1400px;
    }

    .create-card {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
        backdrop-filter: blur(10px);
        border: 1px solid rgba(100, 150, 255, 0.3);
        border-radius: 20px;
        padding: 30px;
        margin-bottom: 30px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
        transition: all 0.3s ease;
    }

    .create-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(100, 150, 255, 0.2);
        border-color: rgba(100, 150, 255, 0.5);
    }

    .create-card h3 {
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: 20px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .create-card h3 i {
        color: #6496ff;
    }

    .form-control,
    .form-select {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(100, 150, 255, 0.3);
        border-radius: 10px;
        color: rgba(255, 255, 255, 0.9);
        padding: 12px 15px;
        backdrop-filter: blur(5px);
        transition: all 0.3s ease;
    }

    .form-control:focus,
    .form-select:focus {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(100, 150, 255, 0.6);
        box-shadow: 0 0 15px rgba(100, 150, 255, 0.3);
        color: white;
    }

    /* 修复select下拉框选项的样式 */
    .form-select option {
        background: rgba(30, 30, 60, 0.95);
        color: rgba(255, 255, 255, 0.9);
        border: none;
    }

    .form-select option:hover,
    .form-select option:focus,
    .form-select option:checked {
        background: rgba(100, 150, 255, 0.3);
        color: white;
    }

    .form-control::placeholder {
        color: rgba(255, 255, 255, 0.5);
    }

    .form-label {
        color: rgba(255, 255, 255, 0.8);
        font-weight: 500;
        margin-bottom: 8px;
    }

    .btn-gradient {
        background: linear-gradient(135deg, #6496ff, #00d4ff);
        border: none;
        color: white;
        padding: 12px 30px;
        border-radius: 25px;
        font-weight: 600;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: all 0.3s ease;
        box-shadow: 0 4px 15px rgba(100, 150, 255, 0.3);
    }

    .btn-gradient:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(100, 150, 255, 0.4);
        color: white;
        text-decoration: none;
    }

    .btn-outline-gradient {
        background: transparent;
        border: 2px solid rgba(100, 150, 255, 0.6);
        color: rgba(255, 255, 255, 0.9);
        padding: 10px 25px;
        border-radius: 20px;
        font-weight: 500;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s ease;
        backdrop-filter: blur(5px);
    }

    .btn-outline-gradient:hover {
        background: linear-gradient(135deg, rgba(100, 150, 255, 0.2), rgba(0, 212, 255, 0.2));
        border-color: rgba(100, 150, 255, 0.8);
        color: white;
        text-decoration: none;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(100, 150, 255, 0.3);
    }

    .alert {
        background: linear-gradient(135deg, rgba(255, 193, 7, 0.2), rgba(255, 193, 7, 0.1));
        border: 1px solid rgba(255, 193, 7, 0.4);
        border-radius: 15px;
        color: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
    }

    .alert-info {
        background: linear-gradient(135deg, rgba(13, 202, 240, 0.2), rgba(13, 202, 240, 0.1));
        border-color: rgba(13, 202, 240, 0.4);
    }

    .alert-success {
        background: linear-gradient(135deg, rgba(25, 135, 84, 0.2), rgba(25, 135, 84, 0.1));
        border-color: rgba(25, 135, 84, 0.4);
    }

    .form-check-input {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(100, 150, 255, 0.3);
    }

    .form-check-input:checked {
        background: linear-gradient(135deg, #6496ff, #00d4ff);
        border-color: rgba(100, 150, 255, 0.8);
    }

    .form-check-label {
        color: rgba(255, 255, 255, 0.8);
    }

    .text-muted {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    .status-badge {
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    .status-pending {
        background: linear-gradient(135deg, rgba(255, 193, 7, 0.3), rgba(255, 193, 7, 0.2));
        color: #ffc107;
        border: 1px solid rgba(255, 193, 7, 0.4);
    }

    .status-running {
        background: linear-gradient(135deg, rgba(13, 202, 240, 0.3), rgba(13, 202, 240, 0.2));
        color: #0dcaf0;
        border: 1px solid rgba(13, 202, 240, 0.4);
    }

    .code-card {
        background: rgba(30, 30, 60, 0.9) !important;
        color: rgba(200, 220, 255, 0.9) !important;
        border: 1px solid rgba(100, 150, 255, 0.3) !important;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .code-card:hover {
        background: rgba(40, 40, 80, 0.95) !important;
        color: rgba(230, 240, 255, 0.95) !important;
        transform: translateY(-3px);
        box-shadow: 0 8px 20px rgba(100, 150, 255, 0.2);
    }

    /* Python 语言卡片 */
    .code-card-python {
        background: linear-gradient(135deg, rgba(53, 114, 165, 0.3) 0%, rgba(32, 74, 135, 0.4) 100%) !important;
        border-color: rgba(53, 114, 165, 0.5) !important;
    }

    .code-card-python:hover {
        background: linear-gradient(135deg, rgba(53, 114, 165, 0.4) 0%, rgba(32, 74, 135, 0.5) 100%) !important;
        border-color: rgba(53, 114, 165, 0.8) !important;
        box-shadow: 0 8px 20px rgba(53, 114, 165, 0.3) !important;
    }

    /* JavaScript 语言卡片 */
    .code-card-javascript {
        background: linear-gradient(135deg, rgba(240, 219, 79, 0.3) 0%, rgba(227, 183, 31, 0.4) 100%) !important;
        border-color: rgba(240, 219, 79, 0.5) !important;
    }

    .code-card-javascript:hover {
        background: linear-gradient(135deg, rgba(240, 219, 79, 0.4) 0%, rgba(227, 183, 31, 0.5) 100%) !important;
        border-color: rgba(240, 219, 79, 0.8) !important;
        box-shadow: 0 8px 20px rgba(240, 219, 79, 0.3) !important;
    }

    /* TypeScript 语言卡片 */
    .code-card-typescript {
        background: linear-gradient(135deg, rgba(255, 105, 180, 0.3) 0%, rgba(219, 112, 147, 0.4) 100%) !important;
        border-color: rgba(255, 105, 180, 0.5) !important;
    }

    .code-card-typescript:hover {
        background: linear-gradient(135deg, rgba(255, 105, 180, 0.4) 0%, rgba(219, 112, 147, 0.5) 100%) !important;
        border-color: rgba(255, 105, 180, 0.8) !important;
        box-shadow: 0 8px 20px rgba(255, 105, 180, 0.3) !important;
    }

    /* Lua 语言卡片 */
    .code-card-lua {
        background: linear-gradient(135deg, rgba(46, 139, 87, 0.3) 0%, rgba(60, 179, 113, 0.4) 100%) !important;
        border-color: rgba(46, 139, 87, 0.5) !important;
    }

    .code-card-lua:hover {
        background: linear-gradient(135deg, rgba(46, 139, 87, 0.4) 0%, rgba(60, 179, 113, 0.5) 100%) !important;
        border-color: rgba(46, 139, 87, 0.8) !important;
        box-shadow: 0 8px 20px rgba(46, 139, 87, 0.3) !important;
    }

    /* 语言标签样式 */
    .language-badge-python {
        background: linear-gradient(135deg, rgba(53, 114, 165, 0.8), rgba(32, 74, 135, 0.8)) !important;
        color: white !important;
        border: 1px solid rgba(53, 114, 165, 0.6) !important;
    }

    .language-badge-javascript {
        background: linear-gradient(135deg, rgba(240, 219, 79, 0.8), rgba(227, 183, 31, 0.8)) !important;
        color: rgba(0, 0, 0, 0.8) !important;
        border: 1px solid rgba(240, 219, 79, 0.6) !important;
    }

    .language-badge-typescript {
        background: linear-gradient(135deg, rgba(255, 105, 180, 0.8), rgba(219, 112, 147, 0.8)) !important;
        color: white !important;
        border: 1px solid rgba(255, 105, 180, 0.6) !important;
    }

    .language-badge-lua {
        background: linear-gradient(135deg, rgba(46, 139, 87, 0.8), rgba(60, 179, 113, 0.8)) !important;
        color: white !important;
        border: 1px solid rgba(46, 139, 87, 0.6) !important;
    }

    .mode-select-card {
        background: rgba(30, 30, 60, 0.9);
        color: rgba(200, 220, 255, 0.9);
        border: 1px solid rgba(100, 150, 255, 0.3);
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .mode-select-card:hover {
        background: rgba(40, 40, 75, 0.95) !important;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    }

    /* 开关按钮样式 */
    .switch-label {
        cursor: pointer;
        display: block;
    }

    .switch-container {
        position: relative;
        display: inline-block;
        width: 60px;
        height: 30px;
    }

    .switch-input {
        opacity: 0;
        width: 0;
        height: 0;
        position: absolute;
    }

    .switch-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(108, 117, 125, 0.3), rgba(108, 117, 125, 0.4));
        border: 1px solid rgba(108, 117, 125, 0.5);
        border-radius: 30px;
        transition: all 0.4s ease;
        box-shadow:
            inset 0 2px 4px rgba(0, 0, 0, 0.2),
            0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .switch-slider:before {
        position: absolute;
        content: "";
        height: 22px;
        width: 22px;
        left: 3px;
        bottom: 3px;
        background: linear-gradient(135deg, #ffffff, #f8f9fa);
        border-radius: 50%;
        transition: all 0.4s ease;
        box-shadow:
            0 2px 6px rgba(0, 0, 0, 0.2),
            0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .switch-input:checked + .switch-slider {
        background: linear-gradient(135deg, #00d4ff, #6496ff);
        border-color: #00d4ff;
        box-shadow:
            inset 0 2px 4px rgba(0, 212, 255, 0.3),
            0 0 15px rgba(0, 212, 255, 0.4),
            0 2px 8px rgba(0, 212, 255, 0.2);
    }

    .switch-input:checked + .switch-slider:before {
        transform: translateX(30px);
        background: linear-gradient(135deg, #ffffff, #f0f8ff);
        box-shadow:
            0 2px 8px rgba(0, 212, 255, 0.3),
            0 1px 4px rgba(0, 0, 0, 0.1);
    }

    .switch-slider:hover {
        transform: scale(1.05);
        box-shadow:
            inset 0 2px 4px rgba(0, 0, 0, 0.2),
            0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .switch-input:checked + .switch-slider:hover {
        box-shadow:
            inset 0 2px 4px rgba(0, 212, 255, 0.3),
            0 0 20px rgba(0, 212, 255, 0.5),
            0 4px 12px rgba(0, 212, 255, 0.3);
    }

    .switch-input:focus + .switch-slider {
        outline: none;
        box-shadow:
            inset 0 2px 4px rgba(0, 0, 0, 0.2),
            0 0 0 3px rgba(0, 212, 255, 0.3);
    }

    .switch-input:checked:focus + .switch-slider {
        box-shadow:
            inset 0 2px 4px rgba(0, 212, 255, 0.3),
            0 0 15px rgba(0, 212, 255, 0.4),
            0 0 0 3px rgba(0, 212, 255, 0.5);
    }

    /* 禁用状态的按钮样式 */
    .btn-gradient:disabled {
        background: linear-gradient(135deg, rgba(100, 150, 255, 0.5), rgba(0, 212, 255, 0.5)) !important;
        cursor: not-allowed !important;
        transform: none !important;
        box-shadow: 0 2px 8px rgba(100, 150, 255, 0.2) !important;
        pointer-events: none;
    }

    .btn-gradient:disabled:hover {
        transform: none !important;
        box-shadow: 0 2px 8px rgba(100, 150, 255, 0.2) !important;
    }


</style>
{% endblock %}

{% block content %}
<div class="container mt-4">
    <!-- <div class="page-header">
        <h1><i class="fas fa-plus-circle"></i> 创建新对战</h1>
    </div> -->

    <div class="row justify-content-center">
        <div class="col-lg-10 col-xl-11">

            <!-- 队列状态显示 -->
            {% if queue_status %}
            <div class="create-card">
                <h3><i class="fas fa-list"></i> 对战队列状态</h3>
                <div class="row">
                    <div class="col-md-3">
                        <div class="text-center">
                            <div class="h4 mb-1">{{ queue_status.queue_count }}/{{ queue_status.max_queue_size }}</div>
                            <small class="text-muted">队列容量</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center">
                            <div class="h4 mb-1">{{ queue_status.running_count }}/{{ queue_status.max_concurrent_battles }}</div>
                            <small class="text-muted">运行中</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center">
                            <div class="h4 mb-1">{{ queue_status.practice_queue }}</div>
                            <small class="text-muted">练习赛队列</small>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="text-center">
                            <div class="h4 mb-1">{{ queue_status.ranked_queue }}</div>
                            <small class="text-muted">排位赛队列</small>
                        </div>
                    </div>
                </div>

                <!-- 队列已满提示 -->
                {% if not queue_status.can_add_to_queue %}
                <div class="alert alert-warning mt-3" role="alert">
                    <div class="d-flex align-items-center">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        <div>
                            <strong>队列容量已满！</strong><br>
                            当前队列已达到最大容量 ({{ queue_status.queue_count }}/{{ queue_status.max_queue_size }})，暂时无法创建新的对战。<br>
                            请等待队列中的对战完成后再试，或稍后刷新页面查看最新状态。
                        </div>
                    </div>
                </div>
                {% endif %}
            </div>
            {% endif %}

            <!-- 返回按钮 -->
            <div class="d-flex justify-content-end mb-4">
                <a href="{% url 'battles:battle_list' %}" class="btn-outline-gradient">
                    <i class="fas fa-arrow-left"></i> 返回列表
                </a>
            </div>

            <!-- 当前匹配状态 -->
            {% if current_match %}
            <div class="create-card">
                <h3><i class="fas fa-clock"></i> 正在匹配中</h3>
                <div class="mb-3">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span>匹配模式:</span>
                        <strong>{{ current_match.get_match_mode_display }}</strong>
                    </div>
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <span>等待时间:</span>
                        <span class="status-badge status-pending" id="waiting-time">计算中...</span>
                    </div>
                </div>
                <div class="d-flex gap-3">
                    <a href="{% url 'battles:match_status' %}" class="btn-gradient">
                        <i class="fas fa-eye"></i> 查看详情
                    </a>
                    <form method="post" action="{% url 'battles:cancel_match' %}" class="d-inline">
                        {% csrf_token %}
                        <button type="submit" class="btn-outline-gradient"
                            style="border-color: rgba(220, 53, 69, 0.6); color: #dc3545;"
                            onclick="return confirm('确定要取消匹配吗？')">
                            <i class="fas fa-times"></i> 取消匹配
                        </button>
                    </form>
                </div>
            </div>
            {% endif %}

            {% if codes %}
            <div class="create-card">
                <h3><i class="fas fa-code"></i> 选择参战代码</h3>
                <form method="post">
                    {% csrf_token %}

                    <!-- 最大回合数选择 -->
                    <div class="mb-4">
                        <label class="form-label">最大回合数:</label>
                        <div class="row">
                            <div class="col-md-2">
                                <div class="card mode-select-card">
                                    <div class="card-body text-center">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="round_limit"
                                                id="rounds_50" value="50">
                                            <label class="form-check-label w-100" for="rounds_50">
                                                <i class="fas fa-clock fa-2x text-primary mb-2 d-block"></i>
                                                <h6>50回合</h6>
                                                <p class="text-muted small mb-0">极速对战</p>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="card mode-select-card">
                                    <div class="card-body text-center">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="round_limit"
                                                id="rounds_100" value="100">
                                            <label class="form-check-label w-100" for="rounds_100">
                                                <i class="fas fa-clock fa-2x text-info mb-2 d-block"></i>
                                                <h6>100回合</h6>
                                                <p class="text-muted small mb-0">快速对战</p>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="card mode-select-card">
                                    <div class="card-body text-center">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="round_limit"
                                                id="rounds_200" value="200" checked>
                                            <label class="form-check-label w-100" for="rounds_200">
                                                <i class="fas fa-clock fa-2x text-success mb-2 d-block"></i>
                                                <h6>200回合</h6>
                                                <p class="text-muted small mb-0">标准对战</p>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="card mode-select-card">
                                    <div class="card-body text-center">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="round_limit"
                                                id="rounds_300" value="300">
                                            <label class="form-check-label w-100" for="rounds_300">
                                                <i class="fas fa-clock fa-2x text-warning mb-2 d-block"></i>
                                                <h6>300回合</h6>
                                                <p class="text-muted small mb-0">长时对战</p>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 地图选择 -->
                    <div class="mb-4">
                        <label class="form-label">选择地图:</label>
                        <div class="row">
                            <div class="col-md-3">
                                <div class="card mode-select-card">
                                    <div class="card-body text-center">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="map_selection"
                                                id="map_main6" value="main6" checked>
                                            <label class="form-check-label w-100" for="map_main6">
                                                <i class="fas fa-crown fa-2x text-warning mb-2 d-block"></i>
                                                <h6>Main6</h6>
                                                <p class="text-muted small mb-0">正式地图</p>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="card mode-select-card">
                                    <div class="card-body text-center">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="map_selection"
                                                id="map_main5" value="main5">
                                            <label class="form-check-label w-100" for="map_main5">
                                                <i class="fas fa-map fa-2x text-primary mb-2 d-block"></i>
                                                <h6>Main5</h6>
                                                <p class="text-muted small mb-0">最新地图</p>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="card mode-select-card">
                                    <div class="card-body text-center">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="map_selection"
                                                id="map_main4" value="main4">
                                            <label class="form-check-label w-100" for="map_main4">
                                                <i class="fas fa-mountain fa-2x text-success mb-2 d-block"></i>
                                                <h6>Main4</h6>
                                                <p class="text-muted small mb-0">强哥地图</p>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="card mode-select-card">
                                    <div class="card-body text-center">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="map_selection"
                                                id="map_main2" value="main2">
                                            <label class="form-check-label w-100" for="map_main2">
                                                <i class="fas fa-water fa-2x text-info mb-2 d-block"></i>
                                                <h6>Main2</h6>
                                                <p class="text-muted small mb-0">初版地图</p>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 代码选择 -->
                    <div class="mb-4">
                        <label class="form-label">选择您的代码:</label>
                        <div class="row">
                            {% for code in codes %}
                            <div class="col-lg-4 col-md-6 col-sm-12 mb-3">
                                <div class="card code-card code-card-{{ code.language }}">
                                    <div class="card-body">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="code_id"
                                                id="code_{{ code.id }}" value="{{ code.id }}" required
                                                {% if code.is_starred %}data-starred="true"{% endif %}>
                                            <label class="form-check-label w-100" for="code_{{ code.id }}">
                                                <div class="d-flex align-items-start mb-2">
                                                    {% if code.language == 'python' %}
                                                    <i class="fab fa-python" style="margin-right: 8px; color: rgba(53, 114, 165, 0.8); font-size: 1.2rem;"></i>
                                                    {% elif code.language == 'javascript' %}
                                                    <i class="fab fa-js-square" style="margin-right: 8px; color: rgba(240, 219, 79, 0.8); font-size: 1.2rem;"></i>
                                                    {% elif code.language == 'typescript' %}
                                                    <i class="fab fa-js" style="margin-right: 8px; color: rgba(255, 105, 180, 0.8); font-size: 1.2rem;"></i>
                                                    {% elif code.language == 'lua' %}
                                                    <i class="fas fa-moon" style="margin-right: 8px; color: rgba(46, 139, 87, 0.8); font-size: 1.2rem;"></i>
                                                    {% else %}
                                                    <i class="fas fa-code" style="margin-right: 8px; color: rgba(100, 150, 255, 0.8); font-size: 1.2rem;"></i>
                                                    {% endif %}
                                                    <h6 class="mb-1 flex-grow-1">
                                                        {{ code.title }}
                                                        {% if code.is_starred %}
                                                        <i class="fas fa-star" style="color: #ffd700; margin-left: 5px;" title="星标代码"></i>
                                                        {% endif %}
                                                    </h6>
                                                </div>
                                                <p class="text-muted mb-2">{{ code.description|truncatechars:50 }}</p>
                                                <div class="d-flex justify-content-between align-items-center">
                                                    <span class="badge language-badge-{{ code.language }}">{{ code.get_language_display }}</span>
                                                    <small class="text-muted">{{ code.updated_at|date:"m-d H:i" }}</small>
                                                </div>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    </div>

                    <!-- 对战模式选择 -->
                    <div class="mb-4">
                        <label class="form-label">对战模式:</label>
                        <div class="row">
                            {% comment %} <div class="col-md-3">
                                <div class="card mode-select-card">
                                    <div class="card-body text-center">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="battle_type_input"
                                                id="mode_realtime" value="realtime" checked>
                                            <label class="form-check-label w-100" for="mode_realtime">
                                                <i class="fas fa-bolt fa-2x text-primary mb-2 d-block"></i>
                                                <h6>实时匹配</h6>
                                                <p class="text-muted small mb-0">系统自动匹配对手</p>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div> {% endcomment %}
                            <div class="col-md-3">
                                <div class="card mode-select-card">
                                    <div class="card-body text-center">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="battle_type_input"
                                                id="mode_random" value="random" checked>
                                            <label class="form-check-label w-100" for="mode_random">
                                                <i class="fas fa-random fa-2x text-success mb-2 d-block"></i>
                                                <h6>随机匹配</h6>
                                                <p class="text-muted small mb-0">随机选择公开代码对战</p>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="card mode-select-card">
                                    <div class="card-body text-center">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="battle_type_input"
                                                id="mode_practice" value="practice">
                                            <label class="form-check-label w-100" for="mode_practice">
                                                <i class="fas fa-dumbbell fa-2x text-warning mb-2 d-block"></i>
                                                <h6>练习赛</h6>
                                                <p class="text-muted small mb-0">与指定代码练习</p>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            {% comment %} <div class="col-md-3">
                                <div class="card mode-select-card"
                                    style="background: rgba(30, 30, 60, 0.9); color: rgba(200, 220, 255, 0.9); border: 1px solid rgba(100, 150, 255, 0.3); transition: all 0.3s ease;">
                                    <div class="card-body text-center">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="battle_type_input"
                                                id="mode_friend" value="friend">
                                            <label class="form-check-label w-100" for="mode_friend">
                                                <i class="fas fa-user-friends fa-2x text-info mb-2 d-block"></i>
                                                <h6>好友对战</h6>
                                                <p class="text-muted small mb-0">邀请好友进行对战</p>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div> {% endcomment %}
                        </div>
                    </div>

                    <!-- 是否公开对战 -->
                    <!-- <div class="mb-4">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="is_public"
                                name="is_public" checked>
                            <label class="form-check-label" for="is_public">
                                <i class="fas fa-eye"></i> 公开战斗
                                <small class="text-muted d-block">允许其他用户观看此战斗</small>
                            </label>
                        </div>
                    </div> -->

                    <!-- 保存回合输入数据开关 -->
                    <div class="mb-4">
                        <label for="save_round_inputs" class="switch-label">
                            <span style="color: #00d4ff; font-weight: 600; margin-bottom: 8px; display: block;">保存回合输入数据</span>
                            <small class="text-muted d-block" style="margin-bottom: 12px;">保存所有回合的输入数据用于调试分析（默认只保存错误回合数据）</small>
                            <div class="switch-container">
                                <input type="checkbox" id="save_round_inputs" name="save_round_inputs"
                                       class="switch-input">
                                <span class="switch-slider"></span>
                            </div>
                        </label>
                    </div>

                    <!-- 练习赛对手代码选择 -->
                    <div class="mb-4" id="practice-opponent-select" style="display: none;">
                        <label class="form-label">选择对手代码:</label>

                        <!-- 自己的其他代码 -->
                        {% if user_other_codes %}
                        <div class="mb-3">
                            <h6 class="text-muted mb-2"><i class="fas fa-user"></i> 我的代码</h6>
                            <div class="row">
                                {% for code in user_other_codes %}
                                <div class="col-lg-4 col-md-6 col-sm-12 mb-2">
                                    <div class="card code-card code-card-{{ code.language }} h-100"
                                        style="cursor: pointer;">
                                        <div class="card-body py-3">
                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="opponent_code_id"
                                                    id="opponent_{{ code.id }}" value="{{ code.id }}">
                                                <label class="form-check-label w-100" for="opponent_{{ code.id }}">
                                                    <div class="d-flex align-items-start mb-2">
                                                        {% if code.language == 'python' %}
                                                        <i class="fab fa-python" style="margin-right: 8px; color: rgba(53, 114, 165, 0.8); font-size: 1.1rem;"></i>
                                                        {% elif code.language == 'javascript' %}
                                                        <i class="fab fa-js-square" style="margin-right: 8px; color: rgba(240, 219, 79, 0.8); font-size: 1.1rem;"></i>
                                                        {% elif code.language == 'typescript' %}
                                                        <i class="fab fa-js" style="margin-right: 8px; color: rgba(255, 105, 180, 0.8); font-size: 1.1rem;"></i>
                                                        {% elif code.language == 'lua' %}
                                                        <i class="fas fa-moon" style="margin-right: 8px; color: rgba(46, 139, 87, 0.8); font-size: 1.1rem;"></i>
                                                        {% else %}
                                                        <i class="fas fa-code" style="margin-right: 8px; color: rgba(100, 150, 255, 0.8); font-size: 1.1rem;"></i>
                                                        {% endif %}
                                                        <h6 class="mb-2 flex-grow-1">{{ code.title }}</h6>
                                                    </div>
                                                    {% if code.description %}
                                                    <small class="text-muted d-block text-truncate mb-2" title="{{ code.description }}">{{ code.description|truncatechars:40 }}</small>
                                                    {% endif %}
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <span class="badge language-badge-{{ code.language }}">{{ code.get_language_display }}</span>
                                                        <small class="text-muted">{{ code.updated_at|date:"m-d H:i" }}</small>
                                                    </div>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                        {% endif %}

                        <!-- 公开的代码 -->
                        {% if public_codes %}
                        <div class="mb-3">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h6 class="text-muted mb-0"><i class="fas fa-globe"></i> 公开代码</h6>
                                <div class="d-flex gap-2">
                                    <input type="text" class="form-control form-control-sm" id="code-search"
                                           placeholder="搜索代码或用户..." style="width: 200px;">
                                    <select class="form-select form-select-sm" id="language-filter" style="width: 120px;">
                                        <option value="">所有语言</option>
                                        <option value="javascript">JavaScript</option>
                                        <option value="python">Python</option>
                                        <option value="typescript">TypeScript</option>
                                        <option value="lua">Lua</option>
                                    </select>
                                </div>
                            </div>

                            <!-- 分页信息 -->
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <div class="text-muted small" id="pagination-info">
                                    显示第 <span id="current-page-start">1</span>-<span id="current-page-end">5</span> 个玩家，共 <span id="total-players">0</span> 个
                                </div>
                                <div class="d-flex gap-2" id="pagination-controls">
                                    <button type="button" class="btn btn-sm btn-outline-secondary" id="prev-page" disabled>
                                        <i class="fas fa-chevron-left"></i> 上一页
                                    </button>
                                    <div class="d-flex gap-1" id="page-numbers">
                                        <!-- 页码按钮将通过JavaScript动态生成 -->
                                    </div>
                                    <button type="button" class="btn btn-sm btn-outline-secondary" id="next-page">
                                        下一页 <i class="fas fa-chevron-right"></i>
                                    </button>
                                </div>
                            </div>

                            <!-- 代码列表容器 -->
                            <div id="public-codes-container" style="min-height: 300px;">
                                <!-- 按玩家分组显示公开代码 -->
                                {% regroup public_codes by user as grouped_codes %}
                                {% for group in grouped_codes %}
                                <div class="mb-4 player-group" data-username="{{ group.grouper.username|lower }}" data-player-index="{{ forloop.counter0 }}">
                                    <div class="d-flex align-items-center mb-3">
                                        <h6 class="mb-0 text-info">
                                            <i class="fas fa-user"></i> {{ group.grouper.username }}
                                            <span class="badge bg-secondary ms-2">{{ group.list|length }} 个代码</span>
                                        </h6>
                                    </div>

                                    <!-- 代码水平排列 -->
                                    <div class="row g-3">
                                        {% for code in group.list %}
                                        <div class="col-lg-4 col-md-6 col-sm-12 code-item"
                                             data-title="{{ code.title|lower }}"
                                             data-language="{{ code.language|lower }}"
                                             data-username="{{ group.grouper.username|lower }}">
                                            <div class="card code-card code-card-{{ code.language }} h-100"
                                                style="cursor: pointer; transition: all 0.3s ease;">
                                                <div class="card-body p-3">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="radio" name="opponent_code_id"
                                                            id="opponent_{{ code.id }}" value="{{ code.id }}">
                                                        <label class="form-check-label w-100" for="opponent_{{ code.id }}">
                                                            <div class="d-flex align-items-start mb-2">
                                                                {% if code.language == 'python' %}
                                                                <i class="fab fa-python" style="margin-right: 8px; color: rgba(53, 114, 165, 0.8); font-size: 1.1rem;"></i>
                                                                {% elif code.language == 'javascript' %}
                                                                <i class="fab fa-js-square" style="margin-right: 8px; color: rgba(240, 219, 79, 0.8); font-size: 1.1rem;"></i>
                                                                {% elif code.language == 'typescript' %}
                                                                <i class="fab fa-js" style="margin-right: 8px; color: rgba(255, 105, 180, 0.8); font-size: 1.1rem;"></i>
                                                                {% elif code.language == 'lua' %}
                                                                <i class="fas fa-moon" style="margin-right: 8px; color: rgba(46, 139, 87, 0.8); font-size: 1.1rem;"></i>
                                                                {% else %}
                                                                <i class="fas fa-code" style="margin-right: 8px; color: rgba(100, 150, 255, 0.8); font-size: 1.1rem;"></i>
                                                                {% endif %}
                                                                <h6 class="mb-2 text-truncate flex-grow-1" title="{{ code.title }}">
                                                                    {{ code.title }}
                                                                    {% if code.is_starred %}
                                                                    <i class="fas fa-star text-warning ms-1" title="星标代码"></i>
                                                                    {% endif %}
                                                                </h6>
                                                            </div>
                                                            <div class="d-flex justify-content-between align-items-center mb-2">
                                                                <span class="badge language-badge-{{ code.language }}">{{ code.get_language_display }}</span>
                                                                <small class="text-muted">{{ code.updated_at|date:"m-d" }}</small>
                                                            </div>
                                                            {% if code.description %}
                                                            <small class="text-muted d-block text-truncate" title="{{ code.description }}">{{ code.description|truncatechars:40 }}</small>
                                                            {% endif %}
                                                        </label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        {% endfor %}
                                    </div>
                                </div>
                                {% endfor %}
                            </div>

                            <!-- 没有找到代码的提示 -->
                            <div id="no-codes-found" class="text-center text-muted py-4" style="display: none;">
                                <i class="fas fa-search fa-2x mb-2"></i>
                                <p>没有找到匹配的代码</p>
                            </div>
                        </div>
                        {% endif %}
                    </div>

                    <!-- 提交按钮 -->
                    <div class="d-grid gap-2">
                        {% if queue_status and not queue_status.can_add_to_queue %}
                        <button type="button" class="btn btn-secondary" disabled style="padding: 15px 30px; font-size: 1.1rem;">
                            <i class="fas fa-ban"></i> 队列已满，无法创建对战
                        </button>
                        {% else %}
                        <button type="submit" id="battle-submit-btn" class="btn-gradient" style="padding: 15px 30px; font-size: 1.1rem;">
                            <i class="fas fa-sword-cross"></i> <span id="submit-btn-text">开始对战</span>
                        </button>
                        {% endif %}
                    </div>
                </form>
</div>
{% else %}
<!-- 没有可用代码 -->
<div class="create-card text-center">
    <i class="fas fa-code fa-3x mb-3" style="color: rgba(255, 255, 255, 0.4);"></i>
    <h4 style="color: rgba(255, 255, 255, 0.6);">还没有可用的代码</h4>
    <p class="text-muted mb-4">您需要先创建并激活至少一个代码才能参与对战。</p>
    <a href="{% url 'codes:code_create' %}" class="btn-gradient">
        <i class="fas fa-plus"></i> 创建代码
    </a>
</div>
{% endif %}
</div>
</div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // 代码卡片点击选择
    document.querySelectorAll('.code-card').forEach(card => {
        card.addEventListener('click', function () {
            const radio = this.querySelector('input[type="radio"]');
            if (radio) {
                radio.checked = true;

                // 移除其他卡片的选中状态
                document.querySelectorAll('.code-card').forEach(c => {
                    c.classList.remove('border-primary');
                });

                // 添加当前卡片的选中状态
                this.classList.add('border-primary');
            }
        });
    });

    // 对手代码卡片点击选择
    document.querySelectorAll('#practice-opponent-select .card').forEach(card => {
        card.addEventListener('click', function () {
            const radio = this.querySelector('input[name="opponent_code_id"]');
            if (radio) {
                radio.checked = true;

                // 移除其他对手代码卡片的选中状态
                document.querySelectorAll('#practice-opponent-select .card').forEach(c => {
                    c.classList.remove('border-primary');
                });

                // 添加当前卡片的选中状态
                this.classList.add('border-primary');
            }
        });
    });

    // 对战模式卡片点击选择
    document.querySelectorAll('.card .form-check-input[name="battle_type_input"]').forEach(radio => {
        radio.addEventListener('change', function () {
            // 移除所有模式卡片的选中状态
            document.querySelectorAll('.card .form-check-input[name="battle_type_input"]').forEach(r => {
                r.closest('.card').classList.remove('border-primary');
            });

            // 添加当前模式卡片的选中状态
            if (this.checked) {
                this.closest('.card').classList.add('border-primary');
            }

            // 显示/隐藏相应的输入框
            const practiceInput = document.getElementById('practice-opponent-select');

            if (this.value === 'practice') {
                practiceInput.style.display = 'block';
            } else {
                practiceInput.style.display = 'none';
            }
        });
    });

    // 分页相关变量
    var currentPage = 1;
    var playersPerPage = 3;
    var filteredPlayers = [];
    var allPlayers = [];

    // 初始化玩家数据
    function initializePlayers() {
        allPlayers = Array.from(document.querySelectorAll('.player-group')).map(function(group, index) {
            return {
                element: group,
                username: group.dataset.username,
                index: index,
                visible: true
            };
        });
        filteredPlayers = allPlayers.slice();
    }

    // 搜索和过滤功能
    function filterCodes() {
        var searchTerm = document.getElementById('code-search').value.toLowerCase();
        var languageFilter = document.getElementById('language-filter').value.toLowerCase();

        filteredPlayers = allPlayers.filter(function(player) {
            var group = player.element;
            var username = player.username;
            var codeItems = group.querySelectorAll('.code-item');
            var hasVisibleCodesInGroup = false;

            codeItems.forEach(function(item) {
                var title = item.dataset.title;
                var language = item.dataset.language;
                var itemUsername = item.dataset.username;

                var matchesSearch = !searchTerm ||
                    title.includes(searchTerm) ||
                    itemUsername.includes(searchTerm);
                var matchesLanguage = !languageFilter || language === languageFilter;

                if (matchesSearch && matchesLanguage) {
                    item.style.display = 'block';
                    hasVisibleCodesInGroup = true;
                } else {
                    item.style.display = 'none';
                }
            });

            return hasVisibleCodesInGroup;
        });

        // 重置到第一页
        currentPage = 1;
        updatePagination();
        displayCurrentPage();
    }

    // 更新分页信息和控件
    function updatePagination() {
        var totalPlayers = filteredPlayers.length;
        var totalPages = Math.ceil(totalPlayers / playersPerPage);

        // 更新分页信息
        var startPlayer = totalPlayers > 0 ? (currentPage - 1) * playersPerPage + 1 : 0;
        var endPlayer = Math.min(currentPage * playersPerPage, totalPlayers);

        document.getElementById('current-page-start').textContent = startPlayer;
        document.getElementById('current-page-end').textContent = endPlayer;
        document.getElementById('total-players').textContent = totalPlayers;

        // 更新分页按钮状态
        var prevBtn = document.getElementById('prev-page');
        var nextBtn = document.getElementById('next-page');

        prevBtn.disabled = currentPage <= 1;
        nextBtn.disabled = currentPage >= totalPages;

        // 生成页码按钮
        generatePageNumbers(totalPages);

        // 显示/隐藏分页控件
        var paginationControls = document.getElementById('pagination-controls');
        paginationControls.style.display = totalPages <= 1 ? 'none' : 'flex';
    }

    // 生成页码按钮
    function generatePageNumbers(totalPages) {
        var pageNumbersContainer = document.getElementById('page-numbers');
        pageNumbersContainer.innerHTML = '';

        // 计算显示的页码范围
        var startPage = Math.max(1, currentPage - 2);
        var endPage = Math.min(totalPages, currentPage + 2);

        // 确保显示5个页码（如果总页数足够）
        if (endPage - startPage < 4) {
            if (startPage === 1) {
                endPage = Math.min(totalPages, startPage + 4);
            } else {
                startPage = Math.max(1, endPage - 4);
            }
        }

        // 添加第一页和省略号
        if (startPage > 1) {
            addPageButton(1);
            if (startPage > 2) {
                var ellipsis = document.createElement('span');
                ellipsis.className = 'btn btn-sm btn-outline-secondary disabled';
                ellipsis.textContent = '...';
                pageNumbersContainer.appendChild(ellipsis);
            }
        }

        // 添加页码按钮
        for (var i = startPage; i <= endPage; i++) {
            addPageButton(i);
        }

        // 添加省略号和最后一页
        if (endPage < totalPages) {
            if (endPage < totalPages - 1) {
                var ellipsis = document.createElement('span');
                ellipsis.className = 'btn btn-sm btn-outline-secondary disabled';
                ellipsis.textContent = '...';
                pageNumbersContainer.appendChild(ellipsis);
            }
            addPageButton(totalPages);
        }
    }

    // 添加页码按钮
    function addPageButton(pageNum) {
        var pageNumbersContainer = document.getElementById('page-numbers');
        var button = document.createElement('button');
        button.type = 'button';
        button.className = 'btn btn-sm ' + (pageNum === currentPage ? 'btn-primary' : 'btn-outline-secondary');
        button.textContent = pageNum;
        button.onclick = function() { goToPage(pageNum); };
        pageNumbersContainer.appendChild(button);
    }

    // 跳转到指定页面
    function goToPage(page) {
        var totalPages = Math.ceil(filteredPlayers.length / playersPerPage);
        if (page >= 1 && page <= totalPages) {
            currentPage = page;
            updatePagination();
            displayCurrentPage();
        }
    }

    // 显示当前页面的玩家
    function displayCurrentPage() {
        // 隐藏所有玩家组
        allPlayers.forEach(function(player) {
            player.element.style.display = 'none';
        });

        // 显示当前页面的玩家
        var startIndex = (currentPage - 1) * playersPerPage;
        var endIndex = startIndex + playersPerPage;
        var currentPagePlayers = filteredPlayers.slice(startIndex, endIndex);

        currentPagePlayers.forEach(function(player) {
            player.element.style.display = 'block';
        });

        // 显示/隐藏"没有找到代码"的提示
        var noCodesFound = document.getElementById('no-codes-found');
        if (noCodesFound) {
            noCodesFound.style.display = filteredPlayers.length === 0 ? 'block' : 'none';
        }
    }

    // 代码选择卡片悬停效果
    function addCodeCardHoverEffects() {
        document.querySelectorAll('.code-selection-card').forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-2px)';
                this.style.boxShadow = '0 4px 15px rgba(100, 150, 255, 0.3)';
                this.style.borderColor = 'rgba(100, 150, 255, 0.5)';
            });

            card.addEventListener('mouseleave', function() {
                if (!this.querySelector('input[type="radio"]').checked) {
                    this.style.transform = 'translateY(0)';
                    this.style.boxShadow = 'none';
                    this.style.borderColor = 'rgba(100, 150, 255, 0.2)';
                }
            });
        });
    }

    // 初始化选中状态
    document.addEventListener('DOMContentLoaded', function () {
        // 自动选中星标代码（如果有的话）
        var starredCode = document.querySelector('input[name="code_id"][data-starred="true"]');
        if (starredCode) {
            starredCode.checked = true;
            starredCode.closest('.card').classList.add('border-primary');
        }

        // 初始化对战模式选中状态
        var checkedMode = document.querySelector('input[name="battle_type_input"]:checked');
        if (checkedMode) {
            checkedMode.closest('.card').classList.add('border-primary');
            // 初始化输入框显示状态
            var practiceInput = document.getElementById('practice-opponent-select');

            if (checkedMode.value === 'practice') {
                practiceInput.style.display = 'block';
            }
        }

        // 初始化分页功能
        if (document.querySelector('.player-group')) {
            initializePlayers();
            updatePagination();
            displayCurrentPage();

            // 添加分页按钮事件监听器
            document.getElementById('prev-page').addEventListener('click', function() {
                if (currentPage > 1) {
                    goToPage(currentPage - 1);
                }
            });

            document.getElementById('next-page').addEventListener('click', function() {
                var totalPages = Math.ceil(filteredPlayers.length / playersPerPage);
                if (currentPage < totalPages) {
                    goToPage(currentPage + 1);
                }
            });
        }

        // 添加搜索和过滤事件监听器
        var codeSearch = document.getElementById('code-search');
        var languageFilter = document.getElementById('language-filter');
        if (codeSearch && languageFilter) {
            codeSearch.addEventListener('input', filterCodes);
            languageFilter.addEventListener('change', filterCodes);
        }

        // 初始化代码卡片悬停效果
        addCodeCardHoverEffects();

        // 初始化回合数选择交互
        document.querySelectorAll('input[name="round_limit"]').forEach(radio => {
            radio.addEventListener('change', function () {
                // 移除所有回合数卡片的选中状态
                document.querySelectorAll('.round-limit-card').forEach(card => {
                    card.classList.remove('border-primary');
                });

                // 添加当前卡片的选中状态
                if (this.checked) {
                    this.closest('.round-limit-card').classList.add('border-primary');
                }
            });
        });

        // 初始化回合数选中状态
        var checkedRoundLimit = document.querySelector('input[name="round_limit"]:checked');
        if (checkedRoundLimit) {
            checkedRoundLimit.closest('.round-limit-card').classList.add('border-primary');
        }

        // 添加分页和代码卡片样式
        var style = document.createElement('style');
        style.textContent = `
        .code-selection-card:hover {
            transform: translateY(-2px) !important;
            box-shadow: 0 4px 15px rgba(100, 150, 255, 0.3) !important;
            border-color: rgba(100, 150, 255, 0.5) !important;
        }
        .code-selection-card input[type="radio"]:checked + label {
            background: rgba(100, 150, 255, 0.1);
            border-radius: 5px;
        }
        .round-limit-card {
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .round-limit-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(100, 150, 255, 0.3);
            border-color: rgba(100, 150, 255, 0.5) !important;
        }
        .round-limit-card.border-primary {
            background: rgba(100, 150, 255, 0.1);
        }
        #pagination-controls .btn {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(100, 150, 255, 0.3);
            color: rgba(255, 255, 255, 0.8);
            transition: all 0.3s ease;
            height: 40px;
            padding: 2px 8px;
            font-size: 12px;
            line-height: 1.2;
        }
        #pagination-controls .btn:hover:not(:disabled) {
            background: rgba(100, 150, 255, 0.2);
            border-color: rgba(100, 150, 255, 0.5);
            color: white;
            transform: translateY(-1px);
        }
        #pagination-controls .btn-primary {
            background: linear-gradient(135deg, #6496ff, #00d4ff);
            border-color: rgba(100, 150, 255, 0.8);
            color: white;
        }
        #pagination-controls .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        #pagination-info {
            color: rgba(255, 255, 255, 0.7);
        }
        .player-group {
            transition: all 0.3s ease;
        }
        .player-group:hover {
            background: rgba(255, 255, 255, 0.02);
            border-radius: 10px;
            padding: 10px;
            margin: -10px;
        }
    `;
        document.head.appendChild(style);

        // 计算等待时间
        updateWaitingTime();
        setInterval(updateWaitingTime, 1000); // 每秒更新

        // 防重复提交逻辑
        setupFormSubmitProtection();
    });



    // 更新等待时间
    function updateWaitingTime() {
        var waitingTimeElement = document.getElementById('waiting-time');
        if (waitingTimeElement) {
            // 这里可以通过AJAX获取实际等待时间，暂时显示静态文本
            var now = new Date();
            var startTime = new Date('{{ current_match.created_at|date:"c" }}');
            var diff = Math.floor((now - startTime) / 1000);
            var minutes = Math.floor(diff / 60);
            var seconds = diff % 60;
            waitingTimeElement.textContent = minutes + '分' + seconds + '秒';
        }
    }

    // 防重复提交保护
    function setupFormSubmitProtection() {
        var form = document.querySelector('form');
        var submitBtn = document.getElementById('battle-submit-btn');
        var submitBtnText = document.getElementById('submit-btn-text');
        var isSubmitting = false;

        if (form && submitBtn && submitBtnText) {
            form.addEventListener('submit', function(e) {
                // 如果正在提交，阻止重复提交
                if (isSubmitting) {
                    e.preventDefault();
                    return false;
                }

                // 检查是否选择了代码
                var selectedCode = form.querySelector('input[name="code_id"]:checked');
                if (!selectedCode) {
                    e.preventDefault();
                    alert('请选择一个代码参与对战！');
                    return false;
                }

                // 如果是练习模式，检查是否选择了对手代码
                var battleType = form.querySelector('input[name="battle_type_input"]:checked');
                if (battleType && battleType.value === 'practice') {
                    var selectedOpponent = form.querySelector('input[name="opponent_code_id"]:checked');
                    if (!selectedOpponent) {
                        e.preventDefault();
                        alert('练习模式下请选择对手代码！');
                        return false;
                    }
                }

                // 标记为正在提交
                isSubmitting = true;

                // 禁用提交按钮并显示加载状态
                submitBtn.disabled = true;
                submitBtn.style.opacity = '0.7';
                submitBtn.style.cursor = 'not-allowed';
                submitBtnText.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 创建中...';

                // 5秒后重新启用按钮（防止网络问题导致永久禁用）
                setTimeout(function() {
                    if (isSubmitting) {
                        isSubmitting = false;
                        submitBtn.disabled = false;
                        submitBtn.style.opacity = '1';
                        submitBtn.style.cursor = 'pointer';
                        submitBtnText.innerHTML = '开始对战';
                    }
                }, 5000);
            });

            // 页面卸载时重置状态
            window.addEventListener('beforeunload', function() {
                isSubmitting = false;
            });
        }
    }
</script>
{% endblock %}